import GameInfoView from '@/components/GameInfo/GameInfoView';
import services from '@/services/game';
import { PageContainer } from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, Flex, Typography } from 'antd';
import React from 'react';
import styles from './index.less';

const { queryNowGame } = services.GameController;

const HomePage: React.FC = () => {
  const [modalVisible, setModalVisible] = React.useState(false);
  const { data } = useRequest(() => queryNowGame());

  return (
    <PageContainer ghost title={false}>
      <Flex
        vertical
        style={{ backgroundColor: '#fff', padding: 10, borderRadius: 6 }}
      >
        当前赛事
        <Typography.Title level={2} className={styles.title}>
          {data?.name}
        </Typography.Title>
        <Flex style={{ justifyContent: 'center', alignItems: 'center' }}>
          <Typography.Title level={4} type="success">
            {/* {data?.stateTxt} */}
          </Typography.Title>
          <Typography.Title level={5}>报名人数</Typography.Title>
          <Typography.Title level={5} type="danger">
            {data?.offSize}
          </Typography.Title>
          <Typography.Title level={5}>/{data?.allSize}</Typography.Title>
        </Flex>
        <Button
          type="primary"
          onClick={() => {
            setModalVisible(true);
          }}
        >
          点击进入赛事
        </Button>
      </Flex>
      <GameInfoView
        gameId={data?.gameId ?? ''}
        modalVisible={modalVisible}
        onCancel={setModalVisible}
      />
    </PageContainer>
  );
};

export default HomePage;
